<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="functions.js"></script>

</head>
<body bgcolor="#FFEFF2">
<div width="100%" height="100%">
<div class="left">
    <span class="comments">/**</span><br />
    <span class="space"/><span class="comments">*2017—08-13,</span><br />
    <span class="space"/><span class="comments">*/</span><br />
    <span class="comments">// ****************. </span><br />
    We get to know each other;<br />
    <span class="comments">// ****************..</span><br />
    Chat together;<br />
    <span class="comments">// ****************..</span><br />
    Play games together;<br />
    <span class="comments">// ****************..</span><br />
    In those days when I met you<br />
    <span class="comments">// ****************...</span><br />
    <span class="comments">// ****************...</span><br />
    I'm very happy<br />
    <span class="placeholder"/><span class="comments">// ❤❤❤❤❤❤❤❤❤❤</span><br />
    <span class="placeholder"/><span class="comments">// ❤❤❤❤❤❤❤❤❤❤.</span><br />
    <span class="comments">// ❤❤❤❤❤❤❤❤❤❤.</span><br />
    <br>
    <br>
</div>
<div class="right">
    <canvas id="c" width="1200px" height="800px"></canvas>
    <div class="words">
        <div class="wordss">
        <div class="message">十六            认识你的
            <div id="elapseClock">
            </div>
        </div>
        <div id="loveu">
            愿你<br/>
            <div class="signature">- 天天开心</div>
        </div>
        </div>
    </div>
</div>
</div>
<script>
    var b = document.body;
    var c = document.getElementsByTagName('canvas')[0];
    var a = c.getContext('2d');
    var together = new Date();
    together.setFullYear(2017, 8, 13);
    together.setHours(10);
    together.setMinutes(28);
    together.setSeconds(0);
    together.setMilliseconds(0);
    $(".left").typewriter()
    timeElapse(together);
    setInterval(function () {
        timeElapse(together);
    }, 500);
</script>
<script>
    eval('var M=Math,n=M.pow,i,E=2,F="rgba(233,61,109,",d=M.cos,z=M.sin,L=1,u=30,W=window,w=c.width,h=c.height,r=_1){return M.random()*2-1},y="px Arial",v="❤",q="♥",X=w/2,Y=h/2,T=4,p=_1){var e=this;e.g=_1){e.x=X;e.y=Y;e.k=0;e.l=0;e.t=M.random()*19000;e.c=e.t};e.d=_1){a.fillStyle=F+(e.c/e.t)+")";a.fillText(q,e.x,e.y);e.c-=50;e.x+=e.k;e.y+=e.l;e.k=e.k+r();e.l=e.l+r();if(e.c<0||e.x>w||e.x<0||e.y>h||e.y<0){e.g()}};e.g()},A,B;a.textAlign="center";a.strokeStyle="#000";a.lineWidth=2;for(i=0;i<350;i++){M[i]=new p()}setInterval(_1){a.clearRect(0,0,w,h);a.font=u+y;X=(w/6*n(z(T),3)+w/2);Y=0.8*(-h/40*(13*d(T)-5*d(2*T)-2*d(3*T)-d(4*T))+h/2.3);T+=(z(T)+3)/99;for(i=0;i<350;i++){with(M[i]){A=(x/w-0.5)*2,B=-(y/h-0.5);if(L&&(A*A+2*n((B-0.5*n(M.abs(A),0.5)),2))>0.11){k=l=0}d()}}a.font=120+y;if(E>0.1){if(E<1){a.fillStyle=F+E+")";a.fillText("❤",w/2,h/2)}E-=0.02}a.fillStyle="#E93D6D";a.fillText(v,X,Y+u);a.strokeText(v,X,Y+u)},50);b.bgColor="#FFEFF2";c.onmouseup=_1){L=(L)?0:1}'.replace(/(_1)/g,'function('))
</script>
</body>
<style>
    .left{
        float: left;
        width: 20%;
        height: 50%;
        padding-left: 100px;
        margin-top: 100px;

    }
    #loveu{
        text-align: right;
        margin-top: 40px;
        margin-right: 40px;
    }
    .right{
        float: right;
        margin-top: 50px;
        width: 70%;
        height: 50%;
    }
    #c{
    }
    .words{
        position: absolute;
        top: 250px;
        /*left: 900px;*/
        font-family: sans-serif;
        width: 1200px;
        font-size: 24px;
        color: #666;
    }
    .wordss{
        width: 400px;
        margin: 0 auto;
    }
    .message{
        display: block;
    }
    #elapseClock{
        text-align: right;
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .digit{

    }
</style>

</html>